<template>
  <div>
    <div class="order-parsel">
      <div class="order-left">
        <h5>待核销订单</h5>
        <el-table
          :data="tableData1"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          v-loading="loading"
          element-loading-text="处理中···"
        >
          <el-table-column type="selection" width="30" />
          <el-table-column label="订单用户" width="160">
            <template #default="scope">{{ scope.row.username }}</template>
          </el-table-column>
          <el-table-column label="订单金额" width="100">
            <template #default="scope">{{ scope.row.amout }}</template>
          </el-table-column>
          <el-table-column label="创建时间" width="160">
            <template #default="scope">{{
              dayjs(scope.row.creatTime).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="预约时间" width="160">
            <template #default="scope">{{
              dayjs(scope.row.time).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="订单状态" width="120">
            <template #default="scope">
              <span v-if="scope.row.status === 0" class="span0">待核销</span>
              <span v-else-if="scope.row.status === 1">待核销</span>
              <span v-else-if="scope.row.status === 2">已核销</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="order-btn-box">
        <button class="btn" @click="writeOff" :disabled="orderIds.length == 0 ? true :false">进行核销</button>
      </div>
      <div class="order-right">
        <h5>已核销</h5>
        <el-table :data="tableData2" style="width: 100%">
          <el-table-column type="selection" width="30" />
          <el-table-column label="订单用户" width="160">
            <template #default="scope">{{ scope.row.username }}</template>
          </el-table-column>
          <el-table-column label="订单金额" width="100">
            <template #default="scope">{{ scope.row.amout }}</template>
          </el-table-column>
          <el-table-column label="创建时间" width="160">
            <template #default="scope">{{
              dayjs(scope.row.creatTime).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="预约时间" width="160">
            <template #default="scope">{{
              dayjs(scope.row.time).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="订单状态" width="120">
            <template #default="scope">
              <span v-if="scope.row.status === 0" class="span0">待核销</span>
              <span v-else-if="scope.row.status === 1" class="span1"
                >待核销</span
              >
              <span v-else-if="scope.row.status === 2">已核销</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { ElTable, ElMessage } from "element-plus";
import axios from "axios";
import dayjs from "dayjs";

const tableData = ref([]);
const orderIds = ref([]);
const loading = ref(false);

const getOrderList = async () => {
  await axios.get("http://127.0.0.1:3000/shopfront/getorder").then((res) => {
    if (res.data.code == 200) {
      tableData.value = res.data.data;
    }
  });
};

const tableData1 = computed(() => {
  return tableData.value.filter((item) => item.status == 0);
});

const tableData2 = computed(() => {
  return tableData.value.filter((item) => item.status == 1);
});

const writeOff = async () => {
  loading.value = true;
  await axios
    .put("http://127.0.0.1:3000/shopfront/changeStatus", { ids: orderIds.value })
    .then((res) => {
      if (res.data.code == 200) {
        ElMessage.success("核销成功");
        loading.value = false;
        getOrderList();
        orderIds.splice(0, orderIds.length);
      }
    });
};

const handleSelectionChange = (val) => {

    orderIds.value=val.map(item=>item._id)
    console.log(orderIds)
// let sets = new Set([...e]);
// sets.forEach(item => orderIds.push(item._id))
// console.log(new Set([...orderIds]));


//   [...e].map((item) => {
//     if (orderIds.indexOf(item._id) == -1) {
//       orderIds.push(item._id);
//     }
//   });
// console.log([...orderIds,...e]);
// console.log(orderIds);
    
};

onMounted(() => {
  getOrderList();
});
</script>

<style scoped>
.span0 {
  padding: 0.35rem 0.7rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background: #f5f5f5;
  color: gray;
  font-size: 0.9rem;
}
.span1 {
  padding: 0.35rem 0.7rem;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background: hsl(20, 93%, 78%);
  color: white;
  font-size: 0.9rem;
}
.order-parsel {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.order-left {
  width: 45%;
  height: 100%;
  height: 35rem;
  background-color: #f5f5f5;
  padding: 1rem;
  box-sizing: border-box;
}
.order-right {
  width: 45%;
  height: 35rem;
  background-color: #f5f5f5;
  padding: 1rem;
  box-sizing: border-box;
}
.order-btn-box {
  width: 10%;
  height: 100%;
  text-align: center;
}
.btn {
  padding: 0.5rem 1.5rem;
  border: none;
  box-sizing: border-box;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #ff9a9e, #fad0c4);
}
</style>